<template>
  <div class="dashboard-editor-container">

    <panel-group :chart-data="countData" @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;width: 100%">
      <line-chart :chart-data="lineChartData" style="width: 100%"/>
    </el-row>


    <el-row>
      <div class="chart-wrapper">
        <cultureCategoryChart :culture-category-data="cultureCategoryData"/>
      </div>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import cultureCategoryChart from "./dashboard/CultureCategoryChart.vue";
// import {cultureCategoryCount, dataCount} from "@/api/data_center/data_center";

const lineChartData = {
  newVisitis: {
    expectedData: [200, 200, 200, 200, 200, 200, 200],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  },
  cultures: {
    expectedData: [200, 200, 200, 200, 200, 200, 200],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  },
  purchases: {
    expectedData: [200, 200, 200, 200, 200, 200, 200],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  },
  shoppings: {
    expectedData: [200, 200, 200, 200, 200, 200, 200],
    actualData: [0, 0, 0, 0, 0, 0, 0]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    cultureCategoryChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      countData: lineChartData,
      cultureCategoryData: []
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    init() {
      dataCount().then(res => {
        if (res.code !== 200) {
          this.$message.error(res.msg)
          return
        }
        let data = res.data
        lineChartData.newVisitis.actualData = data.newVisitis.map(item => item.count)
        lineChartData.cultures.actualData = data.cultures.map(item => item.count)
        lineChartData.purchases.actualData = data.purchases.map(item => item.count)
        lineChartData.shoppings.actualData = data.shoppings.map(item => item.count)
      })
      cultureCategoryCount().then(res => {
        if (res.code !== 200) {
          this.$message.error(res.msg)
          return
        }
        this.cultureCategoryData =  res.data
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
